<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-weight:bolder;">账号管理</el-breadcrumb-item>
      <el-breadcrumb-item>账号添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px ;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="input_area">
        <el-form-item prop="username" label="用户名">
          <el-input placeholder="请输入用户名" v-model="ruleForm.username" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password1" label="密码">
          <el-input placeholder="请输入密码" v-model="ruleForm.password1" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item prop="password2" label="确认密码">
          <el-input placeholder="请再次输入密码" v-model="ruleForm.password2" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="管理员权限" prop="limit">
          <el-select v-model="ruleForm.limit" placeholder="请选择管理员权限">
            <el-option label="普通管理员" value="普通管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="submitRegisterForm('ruleForm')" style="margin-right: 20px;">Add administor</el-button>
          <el-button @click="resetForm('ruleForm')">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.password2 !== '') {
            this.$refs.ruleForm.validateField('password2');
          } else {
            var param = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,}$/;
            if (!param.test(value)) {
              callback(new Error('密码至少1个大写字母，1个小写字母和1个数字'))
            } else {
              callback();
            }
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password1) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        // 这是登录表单的数据对象
        ruleForm: {
          username: '',
          password1: '',
          password2: '',
          limit: ''
        },
        // 这是表单的验证规则对象
        rules: {
          // 验证用户名是否合法
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 16,
              message: '用户名最少2个字符，最多16个字符',
              trigger: 'blur'
            }
          ],
          // 验证密码是否合法
          password1: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '密码最少6个字符，最多18个字符',
              trigger: 'blur'
            },
            {
              validator: validatePass,
              trigger: 'blur'
            }
          ],
          password2: [{
              required: true,
              message: '请再次输入密码',
              trigger: 'blur'
            },
            {
              validator: validatePass2,
              trigger: 'blur'
            }
          ],
          // 验证权限
          limit: [{
            required: true,
            message: '请选择管理员权限',
            trigger: 'change'
          }]
        }
      }
    },
    methods: {
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 提交表单
      submitRegisterForm(ruleForm) {
        this.$refs[ruleForm].validate(async (valid) => {
          if (valid) {
            const reg = await this.$http.post('/ordering/user/register', this.ruleForm)
            this.$message.success('管理员添加成功');
            this.$router.push('/userList')
          } else {
            return false;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-button+.el-button{
    margin-left:0 !important;
   }
  .input_area {
    width: 60%;
    margin-left: 20%;

    label {
      display: block;
      margin: 30px 0 0 0;
      font-size: 25px;
      font-weight: bolder;
      color: #00557f;
    }

    .el-form-item__error {
      font-size: 25px;
      font-weight: bolder;
    }

    .el-input__inner {
      outline: none !important;
      border: none !important;
      border-bottom: 1px solid #00557f !important;
      border-radius: 0 !important;
      // margin-bottom: 20px;
      font-size: 20px;
      width: 100% !important;
      padding-left: 0;
    }

    .el-select {
      width: 100% !important;
    }


  }
</style>
